<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <link rel="stylesheet" type="text/css" href="/css/index.css"/>
    <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        function setSelectedClass(url) {
            $('div.cont ul.list li a[href~="' + url + '"]').parent().addClass("current");
        }

        $(function () {
            $('.mycart').hover(
                function () { $('#div_mycart').show('slow'); },
                function () { $('#div_mycart').hide('slow'); }
            );
        });

        $(function () {
            $('.allsort').hover(function () {
                $('#div_allsort').show();
            }, function () {
                $('#div_allsort').hide();
            });
        });
    </script>
</head>
<body>
<!-- header -->
<div class="header">
    <h1 class="logo">
        <a title="" style="background:url('images/logo.png');" href="/">电子商务平台</a>
    </h1>
    <ul class="shortcut">
        <c:choose>
            <c:when test="${sessionScope.LoginUser.role == 'admin'}">
                <li class="first"><a href="/admin/profile/edit">管理员账户</a></li>
            </c:when>
            <c:otherwise>
                <li class="first"><a href="/user/myAccount">我的账户</a></li>
            </c:otherwise>
        </c:choose>
        <li><a href="/order/list">我的订单</a></li>
        <li class='last'><a href="">使用帮助</a></li>
    </ul>
    <p class="loginfo">
        <c:if test="${not empty sessionScope.LoginUser}">
            <img src="${LoginUser.avatar}" alt="用户头像" style="width: 30px; height: 30px; border-radius: 50%; vertical-align: middle; margin-right: 5px;" />
            <c:if test="${LoginUser.role == 'admin'}">
                <a href="/admin" style="margin-right:10px;">后台管理</a>
            </c:if>
            ${LoginUser.account}您好，欢迎您！[<a href="/user/logout" class="reg">安全退出</a>]
        </c:if>
        <c:if test="${empty sessionScope.LoginUser}">
            [<a href="/user/login">登录</a>
            <a class="reg" href="/user/register">免费注册</a>]
        </c:if>
    </p>
</div>

<!-- navbar -->
<div class="navbar">
    <ul>
        <li><a href="">首页</a></li>
    </ul>
    <div class="mycart">
        <dl>
            <dt>
                <a href="/cart/list">购物车<b name="mycart_count">0</b>件</a>
            </dt>
            <dd>
                <a href="/cart/list">去结算</a>
            </dd>
        </dl>
        <div class="shopping" id='div_mycart' style='display:none;'></div>
    </div>
</div>

<!-- search -->
<div class="searchbar">
    <div class="allsort">
        <a href="javascript:void(0);">全部商品分类</a>
        <ul class="sortlist" id='div_allsort' style='display:none'>
            <c:forEach items="${categoryList}" var="cat">
                <li>
                    <h2>
                        <a href="/?categoryId=${cat.id}" <c:if test="${param.categoryId == cat.id}">class="current"</c:if>>${cat.name}</a>
                    </h2>
                </li>
            </c:forEach>
        </ul>
    </div>
    <div class="searchbox">
        <form method='get' action='/'>
            <input
                    class='text' type='text' name='searchName' autocomplete="off"
                    placeholder="输入关键字..." value="${param.searchName}"/>
            <input class="btn" type="submit" value="商品搜索"/>
        </form>
    </div>
    <div class="hotwords">热门搜索：</div>
</div>

<!-- 商品区域 -->
<div id="index" class="wrapper clearfix">

    <div class="main f_l">
        <!-- 最新商品 -->
        <div class="box yellow m_10">
            <div class="title title3">
                <h2><img src="images/front/new_product.gif" alt="最新商品" width="160" height="36"></h2>
            </div>
            <div class="cont clearfix">
                <ul class="prolist">
                    <c:forEach items="${goodsList}" var="goods">
                        <li style="overflow:hidden">
                            <a href="goods/${goods.id}" target="_blank">
                                <c:choose>
                                    <c:when test="${fn:startsWith(goods.image, '//')}">
                                        <img src="https:${goods.image}" width="175" height="175" alt="">
                                    </c:when>
                                    <c:otherwise>
                                        <img src="${goods.image}" width="175" height="175" alt="">
                                    </c:otherwise>
                                </c:choose>
                            </a>
                            <p class="pro_title"><a title="" href="goods/${goods.id}">${goods.name}</a></p>
                            <p class="brown">惊喜价：<b>${goods.salePrice}</b></p>
                            <p class="light_gray">市场价：<s>${goods.marketPrice}</s></p>
                        </li>
                    </c:forEach>
                </ul>
                
                <!-- 分页导航 -->
                <div class="pagination" style="text-align: center; margin-top: 20px; margin-bottom: 20px;">
                    <c:if test="${goodsPage.current > 1}">
                        <a href="/?pageNum=${goodsPage.current - 1}&pageSize=${goodsPage.size}<c:if test='${param.categoryId != null}'> &categoryId=${param.categoryId}</c:if>" class="page-link">上一页</a>
                    </c:if>
                    
                    <c:forEach begin="1" end="${goodsPage.pages}" var="i">
                        <c:choose>
                            <c:when test="${i == goodsPage.current}">
                                <span class="page-link active">${i}</span>
                            </c:when>
                            <c:otherwise>
                                <a href="/?pageNum=${i}&pageSize=${goodsPage.size}<c:if test='${param.categoryId != null}'> &categoryId=${param.categoryId}</c:if>" class="page-link">${i}</a>
                            </c:otherwise>
                        </c:choose>
                    </c:forEach>
                    
                    <c:if test="${goodsPage.current < goodsPage.pages}">
                        <a href="/?pageNum=${goodsPage.current + 1}&pageSize=${goodsPage.size}<c:if test='${param.categoryId != null}'> &categoryId=${param.categoryId}</c:if>" class="page-link">下一页</a>
                    </c:if>
                    
                    <div style="margin-top: 10px; color: #666;">
                        共 ${goodsPage.total} 条记录，当前第 ${goodsPage.current}/${goodsPage.pages} 页
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="sidebar f_r">
        <!-- 热卖商品 -->
        <div class="hot box m_10">
            <div class="title"><h2>热卖商品</h2></div>
            <div class="cont clearfix">
                <ul class="prolist">
                    <c:forEach items="${hottest}" var="goods">
                        <li>
                            <a href="">
                                <c:choose>
                                    <c:when test="${fn:startsWith(goods.image, '//')}">
                                        <img src="https:${goods.image}" width="85" height="85" alt="">
                                    </c:when>
                                    <c:otherwise>
                                        <img src="${goods.image}" width="85" height="85" alt="">
                                    </c:otherwise>
                                </c:choose>
                            </a>
                            <p class="pro_title"><a href="">${goods.name}</a></p>
                            <p class="brown"><b>￥${goods.salePrice}</b></p>
                        </li>
                    </c:forEach>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- footer -->
<div class="footer">
    <p class="links">
        <a href="">关于我们</a>|<a href="">常见问题</a>|<a href="">安全交易</a>|<a href="">购买流程</a>|
        <a href="">如何付款</a>|<a href="">联系我们</a>|<a href="">合作提案</a>
    </p>
    Copyright 蜗牛学苑© 2015-2024 <a class="copyys" target="_blank" href="">蜀ICP备01000010号</a>
</div>
</body>
</html>
